
<template>
    <div id="jsonMap" class="o-echarts"></div>
</template>
<script>
import api from "@/api/commonApi";
import guangping from "@/assets/js/guangping.json";
import yuxian from "@/assets/js/yuxian.json";
export default {
    name: "echart-map",
    data () {
        return {
            popdata: [],
            mapName: ""
        };
    },
    mounted () {
        this.getJsConfig();
        this.getmap();
    },
    methods: {
        getJsConfig () {
            let that = this;
            this.$axios
                .post(api.getMapJsConfig , {})
                .then((res) => {
                    if (res.data.code === 1) {
                        this.mapName = res.data.object.JSConfig;
                    }
                    that.drawLine();
                })
                .catch(() => {});
        },
        getmap () {
            let that = this;
            that.$axios
                .post(api.queryStatistics , {})
                .then((res) => {
                    if (res.data.code === 1) {
                        that.popdata = res.data.object;
                    }
                    that.drawLine();
                })
                .catch(() => {});
        },
        drawLine () {
            let that = this;
            let myChart = echarts.init(document.getElementById("jsonMap"));
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            if (this.mapName === 'guangping') {
                echarts.registerMap("guangping", guangping);
            } else if (this.mapName === 'yuxian') {
                echarts.registerMap("yuxian", yuxian);
            }
            myChart.off("click");
            myChart.setOption({
                layoutCenter: ["50%", "50%"],
                layoutSize: "100%",
                title: {
                    top: "1%",
                    left: "center",
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 600,
                        color: "#222"
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(22,62,166,0.9)",
                    axisPointer: {
                        type: "shadow",
                        axis: "auto",
                        snap: true
                    },
                    textStyle: {
                        color: "#fff",
                        fontStyle: "normal",
                        fontWeight: "normal",
                        fontFamily: "sans-serif",
                        fontSize: 14
                    },
                    padding: 0,
                    formatter: function (params) {
                        let showname = params;
                        return `
                    <div style='width:200px;height:210px;'>
                        <p style="width:100%;height:30px;
                        background: linear-gradient(#3333FF, #3333FF);
                        text-align: center;
                        line-height: 30px;
                        border-top-left-radius:5px;
                        border-top-right-radius:5px;
                        ">${showname.data.name}</p>
                        <p style="line-height: 35px; text-indent: 10px;">家庭医生人数：${showname.data.doctorNum}人</p>
                        <p style="line-height: 35px; text-indent: 10px;">签约人口数：${showname.data.signingNum}人</p>
                        <p style="line-height: 35px; text-indent: 10px;" >签约率：${showname.data.signingRatio}%</p>
                        <p style="line-height: 35px; text-indent: 10px;">重点人群签约数：${showname.data.mainNum}人</p>
                        <p style="line-height: 35px; text-indent: 10px;">重点人群签约率：${showname.data.mainRatio}%</p>
                  </div>
                  `;
                    }
                },
                series: [
                    {
                        type: "map",
                        map: this.mapName,
                        roam: false,
                        geoIndex: 1,
                        zoom: 1,
                        label: {
                            normal: {
                                show: true,
                                textStyle: { color: "#fff" }
                            },
                            emphasis: {
                                show: true,
                                textStyle: { color: "#70ccef" }
                            }
                        },
                        itemStyle: {
                            areaColor: {
                                type: "radial",
                                x: 0,
                                y: 0.5,
                                r: 0.4,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "#000033"
                                    },
                                    {
                                        offset: 0,
                                        color: "#003399"
                                    }
                                ],
                                global: false
                            },
                            borderColor: {
                                type: "radial",
                                x: 0,
                                y: 0.3,
                                r: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#244eef"
                                    },
                                    {
                                        offset: 1,
                                        color: "#003399"
                                    }
                                ],
                                global: false
                            },
                            borderWidth: 2.5
                        },
                        itemStyle : {
                            normal: {
                                areaColor: "#003399",
                                shadowColor: "#152c62",
                                borderColor: "#3399FF",
                                borderWidth: 1.5,
                                shadowOffsetX: 0,
                                shadowOffsetY: 10,
                                opacity: 0.8,
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            emphasis: {
                                color: "#fff",
                                areaColor: "#3333FF",
                                label: {
                                    color: "#ffffff"
                                }
                            }
                        },
                        data: that.popdata
                    }
                ]
            });
        }
    }
};
</script>
<style lang="less" scope>
.o-echarts {
    min-width: 30px;
    min-height: 30px;
    width: 100%;
    height: 85%;
}
#jsonMap {
    width: 100%;
    height: 100%;
}
.dig_box {
    width: 200px;
    height: 158px;
    padding: 15px 10px;
    text-align: left;
    background: #163ea6;
    box-shadow: 0px 26px 21px 0px rgba(0, 0, 0, 0.96);
    opacity: 0.96;
    border-radius: 10px;
}
</style>
